<template>
	<mescroll-uni @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
		<view class="content">
			<view :style='{"minHeight":"100%","width":"100%","padding":"0 30rpx","position":"relative","background":"#F3F3F3","height":"auto"}'>
				<view class="page-title" :style='{"padding":"30rpx 0 10rpx","fontSize":"40rpx","color":"#333","textAlign":"center","fontWeight":"bold"}'>我的预约</view>
				<view class="cu-bar bg-white search" :style='{"padding":"30rpx 0 20rpx 0","margin":"0","background":"none","display":"flex","width":"100%","position":"relative","height":"auto"}'>
					<view :style='{"border":"none","margin":"0","borderRadius":"20rpx","flex":"1","background":"#fff","lineHeight":"100rpx","position":"relative","height":"100rpx"}' class="search-form round">
						<text class="icon iconfont icon-fangdajing07" :style='{"color":"rgb(153, 153, 153)","left":"0px","textAlign":"center","width":"100rpx","fontSize":"50rpx","lineHeight":"100rpx","position":"absolute","right":"0px"}'></text>
						<input placeholder-style="color: #666; font-size: 34rpx;" :style='{"border":"0","padding":"20rpx 20rpx 20rpx 100rpx","color":"#333","borderRadius":"50rpx","background":"none","width":"100%","lineHeight":"60rpx","fontSize":"34rpx","height":"100rpx"}' v-model="searchForm.title" type="text" placeholder="请输入预约标题关键词" ></input>
					</view>
					<button :style='{"border":"0","padding":"0px","margin":"0","color":"#fff","right":"4rpx","borderRadius":"50rpx","top":"30rpx","background":"linear-gradient( 135deg, #9EEEEB 0%, #99ABFF 100%)","width":"160rpx","lineHeight":"100rpx","fontSize":"34rpx","position":"absolute","height":"100rpx","fontWeight":"bold"}' @tap="search" class="cu-btn shadow-blur round">搜索</button>
				</view>
			
				<view class="sort-section" :style='{"padding":"20rpx 0","margin":"20rpx 0 30rpx","borderRadius":"12rpx","background":"#fff","width":"100%"}'>
					<view class="section-title" :style='{"fontSize":"36rpx","color":"#333","margin":"0 0 20rpx 30rpx","fontWeight":"bold"}'>排序方式</view>
					<view :style='{"flexWrap":"wrap","margin":"10rpx 0 10rpx 30rpx","display":"flex"}'>
						<view @click="sortClick('addtime')" :style='{"border":"2rpx solid #999","padding":"0 20rpx","margin":"0 30rpx 0 0","outline":"0","borderRadius":"12rpx","background":"#fff","display":"flex","height":"70rpx","alignItems":"center"}'>
							<text :style='{"color":"#333","lineHeight":"70rpx","fontSize":"32rpx"}'>按日期</text>
							<text v-if="listSort!='addtime'" class="icon iconfont icon-shijian18" :style='{"margin":"0 0 0 10rpx","lineHeight":"70rpx","fontSize":"32rpx","color":"#999"}'></text>
							<text v-else-if="listSort=='addtime'&&listOrder=='asc'" class="icon iconfont icon-shijian18" :style='{"margin":"0 0 0 10rpx","lineHeight":"70rpx","fontSize":"32rpx","color":"#5ba6df"}'></text>
							<text v-else-if="listSort=='addtime'&&listOrder=='desc'" class="icon iconfont icon-shijian18" :style='{"margin":"0 0 0 10rpx","lineHeight":"70rpx","fontSize":"32rpx","color":"#5ba6df"}'></text>
						</view>
					</view>
				</view>

				<view :style='{"width":"100%","background":"none","flexDirection":"column","display":"flex","height":"auto"}'>
					<view v-for="(appointment, index) in list" :key="index" class="appointment-item" :style='{"boxShadow":"0 5rpx 20rpx rgba(0,0,0,.2)","margin":"0 0 40rpx","backgroundColor":"#fff","borderRadius":"20rpx","padding":"30rpx","width":"100%"}'>
						<view class="appointment-header" :style='{"display":"flex","alignItems":"center","justifyContent":"space-between"}'>
							<image :style='{"width":"100rpx","height":"100rpx","borderRadius":"10rpx"}' :src="appointment.picture || '/static/default.jpg'" mode="aspectFill"></image>
							<view class="appointment-info" :style='{"flex":"1","paddingLeft":"20rpx"}'>
								<view class="appointment-title" :style='{"fontSize":"36rpx","color":"#333","fontWeight":"bold"}'>{{appointment.title || '预约标题'}}</view>
								<view :style='{"color":"#666","fontSize":"28rpx","marginTop":"10rpx"}'>{{appointment.yuyuehao || '234324'}}</view>
							</view>
							<view class="appointment-status" :style='{"padding":"4rpx 20rpx","background":"#4CD964","color":"#fff","borderRadius":"30rpx","fontSize":"28rpx"}'>{{appointment.status || '公开'}}</view>
						</view>
						<view class="appointment-venue" :style='{"marginTop":"20rpx","color":"#888","fontSize":"32rpx"}'>{{appointment.address || '才艺展示园'}}</view>
						<view class="appointment-time" :style='{"marginTop":"10rpx","color":"#888","fontSize":"28rpx"}'>发布时间: {{appointment.addtime || '2025-04-15 15:08:25'}}</view>
						<view class="appointment-actions" :style='{"display":"flex","marginTop":"20rpx","justifyContent":"flex-end"}'>
							<button @tap="viewAppointment(appointment)" :style='{"margin":"0 10rpx","padding":"0 30rpx","background":"#4CD964","color":"#fff","borderRadius":"10rpx","fontSize":"28rpx","lineHeight":"70rpx","height":"70rpx"}'>查看</button>
							<button @tap="editAppointment(appointment)" :style='{"margin":"0 10rpx","padding":"0 30rpx","background":"#1296DB","color":"#fff","borderRadius":"10rpx","fontSize":"28rpx","lineHeight":"70rpx","height":"70rpx"}'>修改</button>
							<button @tap="deleteAppointment(appointment)" :style='{"margin":"0 10rpx","padding":"0 30rpx","background":"#E54D42","color":"#fff","borderRadius":"10rpx","fontSize":"28rpx","lineHeight":"70rpx","height":"70rpx"}'>删除</button>
						</view>
					</view>
				</view>
				
				<button @click="addAppointment" :style='{"border":"0","boxShadow":"0 5rpx 20rpx rgba(0,0,0,.3)","color":"rgb(255, 255, 255)","bottom":"120rpx","right":"30rpx","outline":"none","borderRadius":"50rpx","background":"linear-gradient( 135deg, #9EEEEB 0%, #99ABFF 100%)","width":"160rpx","lineHeight":"80rpx","fontSize":"34rpx","position":"fixed","height":"80rpx","zIndex":"9","fontWeight":"bold"}' class="add-btn">新增</button>
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	export default {
		data() {
			return {
				btnColor: ['#409eff','#67c23a','#909399','#e6a23c','#f56c6c','#356c6c','#351c6c','#f093a9','#a7c23a','#104eff','#10441f','#a21233','#503319'],
				list: [],
				userid: '',
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption: {
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '~ 没有更多了 ~',
				},
				hasNext: true,
				searchForm:{
					title: '',
				},
				CustomBar: '0',
				listSort: 'id',
				listOrder: 'desc',
			};
		},
		computed: {
			baseUrl() {
				return this.$base.url;
			},
		},
		async onShow() {
			this.btnColor = this.btnColor.sort(()=> {
				return (0.5-Math.random());
			});
			this.hasNext = true
			// 重新加载数据
			if (this.mescroll) this.mescroll.resetUpScroll()
		},
		async onLoad(options) {
			if(options.userid) {
				this.userid = options.userid;
			} else {
				this.userid = "";
			}
			this.hasNext = true
			// 模拟数据 - 实际应用中应该从服务器获取
			this.loadDemoData();
		},
		methods: {
			// 加载演示数据 - 实际使用时替换为真实API调用
			loadDemoData() {
				// 模拟数据 - 实际应用中应该通过API获取
				this.list = [
					{
						id: 1,
						yuyuehao: '234324',
						title: '才艺展示预约',
						status: '公开',
						address: '才艺展示园',
						addtime: '2025-04-15 15:08:25',
						picture: '/static/demo/appointment1.jpg'
					},
					{
						id: 2,
						yuyuehao: '345678',
						title: '舞蹈室预约',
						status: '待审核',
						address: '社区活动中心',
						addtime: '2025-04-14 10:30:15',
						picture: '/static/demo/appointment2.jpg'
					},
					{
						id: 3,
						yuyuehao: '567890',
						title: '书法练习室预约',
						status: '已确认',
						address: '文化站三楼',
						addtime: '2025-04-13 14:25:40',
						picture: '/static/demo/appointment3.jpg'
					}
				];
			},
			
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.hasNext = true
				// 重置分页参数页数为1
				mescroll.resetUpScroll()
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				// 模拟数据加载延迟
				setTimeout(() => {
					// 实际应用中这里应该调用API获取真实数据
					// let res = await this.$api.page(`yuyue`, params);
					
					// 如果是第一页数据置空
					if (mescroll.num == 1) this.list = this.list;
					
					// 模拟没有更多数据了
					this.hasNext = false;
					mescroll.endSuccess(mescroll.size, this.hasNext);
				}, 500);
			},
			
			// 搜索
			search() {
				// 实际应用中这里应该调用API进行搜索
				this.mescroll.resetUpScroll();
				// 模拟搜索结果
				if (this.searchForm.title) {
					this.list = this.list.filter(item => 
						item.title.includes(this.searchForm.title)
					);
				} else {
					this.loadDemoData();
				}
			},
			
			// 排序点击
			sortClick(type) {
				if (this.listSort == type) {
					if (this.listOrder == 'desc') {
						this.listOrder = 'asc'
					} else {
						this.listOrder = 'desc'
					}
				} else {
					this.listSort = type
					this.listOrder = 'desc'
				}
				
				// 排序逻辑
				if (type === 'addtime') {
					this.list.sort((a, b) => {
						if (this.listOrder === 'asc') {
							return new Date(a.addtime) - new Date(b.addtime);
						} else {
							return new Date(b.addtime) - new Date(a.addtime);
						}
					});
				}
			},
			
			// 查看预约
			viewAppointment(appointment) {
				uni.navigateTo({
					url: `./detail?id=${appointment.id}`
				});
			},
			
			// 编辑预约
			editAppointment(appointment) {
				uni.navigateTo({
					url: `./add-or-update?id=${appointment.id}`
				});
			},
			
			// 删除预约
			deleteAppointment(appointment) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该预约吗？',
					success: (res) => {
						if (res.confirm) {
							// 实际应用中应该调用API删除
							// await this.$api.del('yuyue', JSON.stringify([appointment.id]));
							
							// 模拟删除
							const index = this.list.findIndex(item => item.id === appointment.id);
							if (index !== -1) {
								this.list.splice(index, 1);
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
							}
						}
					}
				});
			},
			
			// 新增预约
			addAppointment() {
				uni.navigateTo({
					url: './add-or-update'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		min-height: calc(100vh - 44px);
		box-sizing: border-box;
		font-size: 34rpx;
	}
	
	.sort-section {
		box-shadow: 0 5rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.appointment-item {
		transition: transform 0.2s;
		
		&:active {
			transform: scale(0.98);
		}
	}
	
	.add-btn {
		transition: all 0.2s;
		
		&:active {
			transform: scale(0.95);
		}
	}
</style> 